<template>
	<view class="shop_setting">
		<view class="main">
			<!-- 店铺名称 -->
			<view class="input">
				<view class="left">店铺名称</view>
				<view class="right">
					<u-input v-model="shopInfo.shop_name" type="text" :clearable="true" placeholder="请输入店铺名称" />
				</view>
			</view>
			
			<!-- 店铺描述 -->
			<view class="input">
				<view class="left">店铺描述</view>
				<view class="right">
					<u-input v-model="shopInfo.shop_dsc" type="textarea" height="120" :clearable="true" placeholder="请输入店铺描述" />
				</view>
			</view>
			
			<!-- 微信号 -->
			<view class="input">
				<view class="left">微信</view>
				<view class="right">
					<u-input v-model="shopInfo.shop_wx" type="text" :clearable="true" placeholder="请输入微信号" />
				</view>
			</view>
			
			<!-- 店铺背景 -->
			<view class="upload-section">
				<view class="title">店铺背景<text class="size-tip">建议尺寸 750×332px</text></view>
				<view class="image" @click="uploadImage(1)">
					<image v-if="shopInfo.image" class="img" :src="yc_image" mode="aspectFill"></image>
					<image v-else class="up_img" src="@/static/images/upImg2.png" mode=""></image>
				</view>
			</view>
			
			<!-- 店铺头像 -->
			<view class="upload-section">
				<view class="title">店铺头像<text class="size-tip">建议尺寸 750×750px</text></view>
				<view class="image" @click="uploadImage(2)">
					<image v-if="shopInfo.logo_image" class="img" :src="yc_logo_image" mode="aspectFill"></image>
					<image v-else class="up_img" src="@/static/images/upImg2.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<BottomBtn title="保存" @submit="submitBtn"></BottomBtn>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	
	export default {
		components: {
			BottomBtn
		},
		data() {
			return {
				shopInfo: {
					shop_name: '',//店铺名称
					logo_image: '',//店铺头像
					image: '',//店铺背景
					shop_dsc: '',//店铺描述
					shop_wx: ''//店铺微信
				},
				yc_image:'',
				yc_logo_image:'',
			};
		},
		onLoad() {
			this.loadShopInfo();
		},
		methods: {
			// 加载店铺信息
			async loadShopInfo() {
				try {
					this.$tips.showLoading('加载中');
					const res = await this.$httpApi.userShopInfo();
					if (res.code == 1) {
						console.log("店铺信息：", res);
						// 可以在这里更新storeinfo
						if(res.data.shop_info){
							this.shopInfo = res.data.shop_info;
							this.yc_logo_image = res.data.shop_info.logo_text;
							this.yc_image = res.data.shop_info.image_text;
						}
					}
				} catch (error) {
					console.error('获取店铺信息失败:', error);
				} finally {
					this.$tips.hideLoading();
				}
			},
			
			// 上传图片
			uploadImage(type) {
				const that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中');
						
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl + '/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type': 'shop_image'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading();
								const res = JSON.parse(uploadFileRes.data);
								if (res.code == 1) {
									if (type == 1) {
										// 店铺背景
										that.shopInfo.image = res.data.url;
										that.yc_logo_image = res.data.logo_image;
										that.yc_image = res.data.fullurl;
									} else {
										// 店铺头像
										that.shopInfo.logo_image = res.data.url;
										that.yc_logo_image = res.data.fullurl;
									}
									that.$tips.showToast('上传成功');
								} else {
									that.$tips.showToast(res.msg || '上传失败');
								}
							},
							fail: function(error) {
								that.$tips.hideLoading();
								that.$tips.showToast('上传失败，请重试');
							}
						});
					},
					error: function(e) {
						that.$tips.showToast('选择图片失败');
					}
				});
			},
			
			// 保存店铺信息
			submitBtn() {
				const that = this;
				
				// 表单验证
				if (!that.shopInfo.shop_name && !that.shopInfo.shop_dsc && !that.shopInfo.shop_wx && !that.shopInfo.logo_image && !that.shopInfo.image) {
					that.$tips.showToast('请输先填写内容');
					return;
				}
				that.$tips.showLoading('保存中');
				// 构建提交参数
				const params = that.shopInfo;
				// 调用保存接口
				that.$httpApi.userUpShop(params).then((res) => {
					that.$tips.hideLoading();
					
					if (res.code == 1) {
						that.$tips.showToast('保存成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						that.$tips.showToast(res.msg || '保存失败');
					}
				}).catch((error) => {
					that.$tips.hideLoading();
					that.$tips.showToast('网络错误，请重试');
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.shop_setting {
		width: 100%;
		padding-top: 24rpx;
		background-color: #f7f8fa;
		min-height: 100vh;
		
		.main {
			width: 100%;
			padding: 0rpx 32rpx 40rpx;
			background: #fff;
			
			.input {
				width: 100%;
				min-height: 100rpx;
				display: flex;
				align-items: flex-start;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.left {
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 60rpx;
				}
				
				.right {
					flex: 1;
					display: flex;
					align-items: center;
					
					u-input {
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
			}
			
			.upload-section {
				margin-top: 40rpx;
				
				.title {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-bottom: 20rpx;
					
					.size-tip {
						font-size: 24rpx;
						color: #999;
						margin-left: 20rpx;
						font-weight: normal;
					}
				}
				
				.image {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #f7f8fa;
					border-radius: 16rpx;
					height: 300rpx;
					border: 2rpx dashed #dcdfe6;
					
					.up_img {
						width: 120rpx;
						height: 120rpx;
						opacity: 0.6;
					}
					
					.img {
						max-width: 100%;
						max-height: 100%;
						border-radius: 12rpx;
					}
				}
			}
		}
	}
</style>